<template>
  <div class="meal">
    <div style="margin-left:6px">
    <!-- 表头 -->
      <div class="meal_title" style="display:flex">
     <span class="meal_title_name">套餐名称:</span>

     <el-input  v-model="name" placeholder="请填写套餐名称"/>

  <!-- 右边 -->
     <span class="meal_title_type">套餐分类:</span>
   <!-- 选择器 -->
      <el-select  v-model="categoryId" placeholder="请选择" :clearable="true">
       <el-option v-for="item in catedata" :key="item.id" :label="item.name"
       :value="item.id"> {{item.name}} </el-option>

     </el-select>

    <span class="meal_title_type">售卖状态:</span>
      <el-select  v-model="status" placeholder="请选择">
       <el-option label="起售"  value="1"> 起售 </el-option>
       <el-option label="停售"  value="2"> 停售 </el-option>
     </el-select>

     <el-button @click="querySetmeal" class="meal_title_qury" type="info">查询</el-button>

     <el-button  @click="delAllhandel" class="meal_title_dish" >批量删除</el-button>
     <el-button @click="addDish" class="meal_title_meal" type="primary">+新建套餐</el-button>

   </div>

     <!-- 表格 -->
        <el-table  style="width:100%"
          :data="tableData" border  class="cate_table"  @selection-change="handleSelectionChange" >
            <el-table-column  align="center" prop="chbox" label="全选" type="selection" width="50px">

          </el-table-column>

           <el-table-column
            align="center"
            prop="name"
            label="套餐名称"
            width="120px"
          >
          </el-table-column>

          <el-table-column
            align="center"
            prop="image"
            label="图片"
            width="150px"
          >
            <template slot-scope="scope">
              <img style="width: 40px" :src="scope.row.image" alt="" />
            </template>
          </el-table-column>

          <el-table-column align="center" label="套餐分类"  prop="meal" width="150px">
             <template slot-scope="scope">
           <span v-if="scope.row.catetype===1">套餐分类</span>
           <span v-else>套餐分类</span>
           </template>
          </el-table-column>

          <el-table-column
            align="center"
            prop="price"
            label="售价"
            width="100px"   >
            <template slot-scope="scope">
           <span>￥{{scope.row.price}}</span>

           </template>
          </el-table-column>
          <el-table-column align="center" prop="stataus" label="账号状态" width="150px">
         <template slot-scope="scope">
           <span v-if="scope.row.status===1"><span class="table_status2">●</span>  启用</span>
           <span v-else><span class="table_status1">●</span> 禁用</span>
           </template>
          </el-table-column>

          <el-table-column
            align="center"
            prop="updateTime"
            label="最后操作时间"
            width="210px"
          >
          <template slot-scope="scope">
              {{scope.row.updateTime ? scope.row.updateTime.replace('T',' '):''}}
          </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="214px">
             <template slot-scope="scope">
            <el-button style="border:none;color:rgb(64,158,255)" @click="editChandler( scope.$index)"  size="mini"  >修改</el-button >
            <el-button  style="border:none;color:rgb(245,108,108)" @click="deletehandel( scope.$index)"  size="mini">删除</el-button>
             <el-button v-if="scope.row.status===1" style="border:none;color:rgb(64,158,255)" @click="disableChandler( scope.$index)"  size="mini">停售</el-button>
             <el-button v-else style="border:none;color:rgb(245,108,108)" @click="startChandler( scope.$index)"  size="mini">启售</el-button>
           </template>

          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="pagination">
         <el-pagination
          background
          layout="total,sizes,prev,pager,next,jumper"
         :current-page="page"
           :page-size="pageSize"
          :page-sizes="[5, 10]"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :total="total"
            ></el-pagination>
        </div>

  </div>
  <AddMeal :dialogVisible="dialogVisible"></AddMeal>
  <Editsetmeal :dialogVisible="dialogVisible"></Editsetmeal>
  </div>
</template>

<script>
import Bus3 from '@/utils/EventBus'
import AddMeal from '@/components/main/meal/addmeal.vue'
import Editsetmeal from '@/components/main/meal/editmeal.vue'
import { dishCategory } from '@/api/dish'
import { setmealpage, deleteAll, setmealstatus } from '@/api/setmeal'
export default {
  name: 'dishIndex',
  components: {
    AddMeal,
    Editsetmeal
  },
  data () {
    return {

      catedata: '',
      dialogVisible: '',
      name: '',
      categoryId: '',
      status: '',
      tableData: [],

      /* 分页 */
      page: 1,
      pageSize: 5,
      pagelimit: 5,
      total: 0,
      indexId: '',
      ids: []
    }
  },
  created () {
    this.category()
    this.initquery()
  },
  methods: {
    handleSelectionChange (selection) {
      const selectedIndexes = selection.map(item => this.tableData.indexOf(item))
      this.indexId = selectedIndexes[0] // 这个只获取第一个点击的复选框
      console.log(this.indexId, 'this.indexId')
      //  console.log(selectedIndexes, 'selectedIndexes')
      if (selection.length > 0) {
        for (let i = 0; i < selection.length; i++) {
          console.log(selection[i].id, 'selection')
          this.ids.push(selection[i].id)
        }
      }
    },

    addDish () {
      // 新增套餐

      Bus3.$emit('sendMsg3', !this.dialogVisible, this.catedata)
      console.log('sendMsg3')
    },
    // 批量删除
    async delAllhandel () {
      const ids = Array.from(new Set(this.ids)).join(',')// 数组去重，变成字符串
      this.ids = ids // 再变成数组

      // 将数组转换为字符串，以适应HTTP头部的限制
      console.log(this.ids, 'ids')
      if (this.ids.length <= 1) {
        this.$message.error('请选择单独删除')
        return
      }

      this.$confirm('确认要批量删除菜品吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteAll(ids).then((result) => {
          if (result.code === 1) {
            // 重新查询数据
            this.$message.success('恭喜你，批量删除成功')
            this.initquery()
          } else {
            this.$message.error('很遗憾，删除失败')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    // 单独删除
    async  deletehandel (index) {
      if (index !== this.indexId) {
        this.$message.error('很遗憾，删除失败，请选择对应的数据删除')
        return
      }

      this.$confirm('确认删除菜品吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteAll(this.tableData[index].id).then((result) => {
          if (result.code === 1) {
            // 重新查询数据
            this.$message.success('恭喜你，删除成功')
            this.initquery()
          } else {
            this.$message.error('很遗憾，删除失败')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    // 初始化分类数据
    async category () {
      const type = 2
      const res = await dishCategory(type)
      this.catedata = res.data.records
      console.log(res, 'cate')
    },
    // 初始化套餐
    async initquery () {
      const res = await setmealpage(this.page, this.pageSize, this.name, this.categoryId, this.status)
      console.log(res.data, 'setmeal')
      this.total = res.data.total
      this.tableData = res.data.records
    },

    // 查询套餐方法
    querySetmeal () {
      this.initquery()
    },

    // 修改
    editChandler (index) {
      if (this.indexId !== index) {
        this.$message.error('抱歉，请先选中套餐，再进行套餐修改')
        return
      }

      const id = this.tableData[index].id
      Bus3.$emit('editmeal', !this.dialogVisible, this.catedata, id)
    },
    startChandler (index) {
      if (this.indexId !== index) {
        this.$message.error('抱歉，请先选中套餐，再进行状态修改')
        return
      }
      // 启用
      // 启售菜品
      this.dishstatus(index, 1, '恭喜你，套餐启售成功', '抱歉，套餐启售失败')
    },
    disableChandler (index) {
      if (this.indexId !== index) {
        this.$message.error('抱歉，请先选中套餐，再进行状态修改')
        return
      }
      // 禁用
      this.dishstatus(index, 2, '恭喜你，套餐停售成功', '抱歉，套餐停售失败')
    },

    /* 封装账号开启禁用方法 */
    dishstatus (index, status, ok, err) {
      const id = this.tableData[index].id

      this.$confirm('确认修改状态码?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        setmealstatus(status, id).then((result) => {
          if (result.code === 1) {
            // 重新查询数据
            this.$message.success(ok)
            this.initquery()
          } else {
            this.$message.error(err)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消修改'
        })
      })
    },

    handleSizeChange (val) {
    // 更新当前页码展示数量
      this.pagelimit = val
      this.pageSize = val
      this.initquery()
    },
    handleCurrentChange (val) {
    // 更新当前页码是第几页
      this.page = val
      this.initquery()
    }
  }
}
</script>

<style lang="less" scoped>
 .meal{
   height: 720px;

    /* 水平阴影位置 | 垂直阴影位置 | 模糊距离 | 阴影的颜色 */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.058);

  padding-left: 16px;
 padding-right: 18px;

  margin-left: 20px;
  margin-top: 20px;

 }

 .meal_title{
  padding-top: 30px;

  .meal_title_name{
    width: 80px;
    line-height: 40px;

  }
  .meal_title_type{
    padding-left: 20px;
    width: 80px;
    line-height: 40px;
  }
.el-input{
    width: 130px;

  }
.el-select{
  width: 120px;

}

  .meal_title_qury{
margin-left: 20px;
    width: 80px;
    color: #ccc;

    background-color: black;

  }
  .meal_title_dish{
    margin-left: 164px;
    border:none;
    color: red;

  }
  .meal_title_meal{
    background-color: orange;
    border:none;
    color: black;
  }
}

.cate_table{
  margin-top: 40px;

}
// 分页
.pagination{
  padding-top: 10px;

}
// 表格状态禁用
.table_status1{
  color: rgba(68, 61, 61, 0.61);
}
// 表格状态启用
.table_status2{
  color: green;
}
/deep/ .el-icon.el-icon-arrow-right{
  margin-left: 5px;
}
</style>
